<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>axios基本使用</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>

<body>
  <button>点击发送 GET 请求</button>
  <button>点击发送 POST 请求</button>
  <button>点击发送 PUT 请求</button>
  <button>点击发送 DELETE 请求</button>
</body>


<script>

  /* 
  axios.get(url[, config]): 发get请求

  axios.delete(url[, config]): 发delete请求  

  axios.post(url[, data, config]): 发post请求  

  axios.put(url[, data, config]): 发put请求

  */



  const btns = document.querySelectorAll('button')

  // 发起get请求
  //  async + await 
  btns[0].onclick = async () => {
    try {
      const response = await axios.get({
        method: 'get',
        url: 'http://localhost:3000/movie',
        params: {
          id: 2,
          name: '大话西游'
        }
      })
      console.log(response.data)
    } catch (error) {
      console.log(error);
    }
  }

  // post请求
  btns[1].onclick = async () => {
    const response = await axios.post('http://localhost:3000/movie', 'name=野外生存记&director=贝爷')
    console.log(response.data);
  }


  // put请求  (替换/更新)
  btns[2].onclick = async () => {
    const response = await axios.put('http://localhost:3000/movie/8',
       {
        name: '奔跑吧',
        director: '邓超'
    })
    console.log(response.data);
  }


  // delete请求  删除
  btns[3].onclick = async () => {
    const response = await axios.delete('http://localhost:3000/movie/8')
    console.log(response.data);
  }





</script>

</html>